<template>
	<view class="loading">
		<view class="title">欢迎注册图书商城</view>
		<u--input class="nickname" v-model="nickname" placeholder="请输入昵称" border="surround" clearable @blur="verifyName"></u--input>
		<text class="errmsg" v-if="nameErr">输入的昵称不正确，请重新输入</text>
		<u--input class="email" v-model="email" placeholder="请输入邮箱" border="surround" clearable @blur="verifyEmail"></u--input>
		<text class="errmsg" v-if="emailErr">输入的邮箱不正确，请重新输入</text>
		<u--input class="password" v-model="password" placeholder="请输入登录密码" type="password" border="surround" clearable @blur="verifyPwd"></u--input>
		<text class="errmsg" v-if="pwdErr">输入的密码位数需要在6-20位</text>
		<u--input class="password" v-model="password_confirmation" placeholder="请输入确认密码" type="password" border="surround" clearable @blur="verifyPwdc"></u--input>
		<text class="errmsg" v-if="pwdcErr">两次输入的密码不一致</text>
		<u-button class="submit" @click="submit" text="注册" type="primary" :disabled="isSubmit"></u-button>
		<view class="other">
			<navigator url="/pages/auth/login">已有账号直接登录</navigator>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: '',
				email: '',
				password: '',
				password_confirmation: '',
				isSame: false,
				nameErr: false,
				emailErr: false,
				pwdErr: false,
				pwdcErr: false,
			}
		},
		onLoad() {
			
		},
		computed: {
			isSubmit() {
				if (this.nickname.trim() && this.email.trim() && this.password.trim() && this.password_confirmation.trim()) {
					return false
				}
				return true
			}
		},
		methods: {
			verifyName() {
				if (this.nickname.trim()) {
					this.nameErr = false
				} else {
					this.nameErr = true
				}
			},
			verifyEmail() {
				if (uni.$u.test.email(this.email)) {
					this.emailErr = false
				} else {
					this.emailErr = true
				}
			},
			verifyPwd() {
				if (uni.$u.test.rangeLength(this.password, [6, 20])) {
					this.pwdErr = false
				} else {
					this.pwdErr = true
				}
			},
			verifyPwdc() {
				if (this.password !== this.password_confirmation) {
					this.pwdcErr = true
				} else {
					this.pwdcErr = false
				}
			},
			async submit() {
				this.verifyName()
				this.verifyEmail()
				this.verifyPwd()
				this.verifyPwdc()
				if (this.nameErr || this.emailErr || this.pwdErr || this.pwdcErr) {
					return false
				}
				const res = await uni.$u.http.post('/api/auth/register', {
					name: this.nickname,
					email: this.email,
					password: this.password,
					password_confirmation: this.password_confirmation
				})
				// console.log(res)
				uni.$u.toast('注册成功')
				setTimeout(() => {
					uni.$u.route({
						type: 'reLaunch',
						url: 'pages/auth/login',
					})
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading {
		padding: 100rpx;
		.errmsg {
			color: red;
		}
		.title {
			font-size: 60rpx;
			text-align: center;
			margin-bottom: 60rpx;
		}
		.email, .password, .submit {
			margin-top: 40rpx;
		}
		.submit {
			margin-bottom: 20rpx;
			color: #FFFFFF;
		}
		.other {
			display: flex;
			justify-content: space-between;
		}
	}
</style>
